<template>
  <div>
    我是home组件<br/>
    <button @click="goNews()">通过js跳转到新闻实现编程式路由</button>
    <br/>

<!--    在main.js中已经全局引入，所以这里直接放进来就能用 -->
    <mt-button type="default">default</mt-button>
    <mt-button type="primary">primary</mt-button>
    <mt-button type="danger">danger</mt-button>
<!--索引-->
    <mt-index-list>
      <mt-index-section index="A">
        <mt-cell title="Aaron"></mt-cell>
        <mt-cell title="Alden"></mt-cell>
        <mt-cell title="Austin"></mt-cell>
      </mt-index-section>
      <mt-index-section index="B">
        <mt-cell title="Baldwin"></mt-cell>
        <mt-cell title="Braden"></mt-cell>
      </mt-index-section>
      <mt-index-section index="C">
        <mt-cell title="ccc"></mt-cell>
        <mt-cell title="caa"></mt-cell>
      </mt-index-section>
      <mt-index-section index="D">
        <mt-cell title="ddd"></mt-cell>
        <mt-cell title="dee"></mt-cell>
      </mt-index-section>
      <mt-index-section index="E">
        <mt-cell title="eee"></mt-cell>
        <mt-cell title="eaa"></mt-cell>
      </mt-index-section>
      <mt-index-section index="F">
        <mt-cell title="fff"></mt-cell>
        <mt-cell title="faa"></mt-cell>
      </mt-index-section>
      ...
      <mt-index-section index="Z">
        <mt-cell title="Zack"></mt-cell>
        <mt-cell title="Zane"></mt-cell>
      </mt-index-section>
    </mt-index-list>
  </div>
</template>
<script>
  export default {
    data() {
      return {}
    },methods:{
      goNews(){
        // this.$router.push({path:'news'})
        // this.$router.push({path:'content?canShu001=499'})
        this.$router.push({name:'news001'})
      }
    }
  }

</script>
<style lang="scss" scoped>
  h2 {
    background-color: blueviolet;
  }
  .button1{
    width:100px;
    height: 50px;
  }
</style>
